<template>
  <div id="search">
    <div class="search-box">
      <van-field ref="inputBox" v-model="keyWord" placeholder="请输入关键词(比如IPhone)" />
      <span class="cancel" @click="back">取消</span>
    </div>
    <van-cell-group>
      <van-cell
        v-for="(item,index) in resultList"
        :key="index"
        :title="item.title"
        @click="toDetailPage(item.id)"
      />
    </van-cell-group>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup } from "vant";
Vue.use(Cell).use(CellGroup);
import searchApi from "@/api/search";
export default {
  data() {
    return {
      keyWord: "",
      resultList: null
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    toDetailPage(id) {			
		this.$router.push({name:"productDetail",params: {id: id }})
	},
    searchProduct(keyword) {
      searchApi.search(keyword).then(res => {
        this.resultList = res.list;
      });
	}
  },
  activated() {
    this.$refs.inputBox.focus();
  },
  watch: {
    keyWord: function(newValue) {
      this.searchProduct(newValue);
    }
  }
};
</script>
<style lang="less" scoped>
	.search-box {
	height: 50px;
	background-color: coral;
	display: flex;
	align-items: center;
	padding: 5px 12px;
	}

	.cancel {
	color: #ffffff;
	padding-left: 5px;
	width: 50px;
	}

	.van-cell {
	text-align: left;
	}
</style>
